<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JongAh - Web Designer & Aspiring Hacker</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="icon" href="favicon_black.png" type="image/x-icon">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollToPlugin.min.js"></script>
</head>
<body>
    <div id="background"></div>
    <header>
        <div class="logo">JongAh</div>
        <nav>
            <div class="menu-toggle">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="home" class="full-height">
            <div class="content">
                <h1 class="hello">HELLO</h1>
                <span class="subtitle">I'm</span>
                <h1 class="glitch" data-text="JongAh">JongAh</h1>
                <p class="description">a web designer and a person who aspires to be a hacker</p>
                <!-- <a href="#about" class="cta-button">Learn More</a> -->
                <div class="arrow-container" onclick="goToSection(1)">
                    <div class="arrow">&#8595;</div>
                </div>
            </div>
        </section>
        <section id="about" class="full-height">
            <div class="content">
                <h2>About Me</h2>
                <p>As a passionate web designer with a keen interest in hacking and cybersecurity, I'm constantly pushing the boundaries of what's possible in the digital realm. My goal is to create beautiful, functional websites while also understanding the intricacies of network security.</p>
                <div class="about-grid">
                    <div class="about-item">
                        <i class="fas fa-code"></i>
                        <h3>Web Design</h3>
                        <p>Crafting visually stunning and user-friendly websites</p>
                    </div>
                    <div class="about-item">
                        <i class="fas fa-shield-alt"></i>
                        <h3>Cybersecurity</h3>
                        <p>Exploring the world of ethical hacking and network security</p>
                    </div>
                    <div class="about-item">
                        <i class="fas fa-lightbulb"></i>
                        <h3>Innovation</h3>
                        <p>Constantly learning and adapting to new technologies</p>
                    </div>
                </div>
            </div>
        </section>
        <section id="skills" class="full-height">
            <div class="content">
                <h2>Skills</h2>
                <div class="skills-grid">
                    <div class="skills-languages">
                        <div class="language-item">
                            <i class="fab fa-html5"></i>
                            <p>HTML5</p>
                        </div>
                        <div class="language-item">
                            <i class="fab fa-css3-alt"></i>
                            <p>CSS3</p>
                        </div>
                        <div class="language-item">
                            <i class="fab fa-js"></i>
                            <p>JavaScript</p>
                        </div>
                        <div class="language-item">
                            <i class="fab fa-python"></i>
                            <p>Python</p>
                        </div>
                        <div class="language-item">
                            <i class="fab fa-java"></i>
                            <p>Java</p>
                        </div>
                        <div class="language-item">
                            <i class="fas fa-network-wired"></i>
                            <p>Network Security</p>
                        </div>
                    </div>
                    <div class="skills-progress">
                        <div class="skill-item">
                            <span>HTML</span>
                            <div class="progress-bar">
                                <div class="progress" style="width: 95%;"></div>
                            </div>
                        </div>
                        <div class="skill-item">
                            <span>CSS</span>
                            <div class="progress-bar">
                                <div class="progress" style="width: 75%;"></div>
                            </div>
                        </div>
                        <div class="skill-item">
                            <span>JavaScript</span>
                            <div class="progress-bar">
                                <div class="progress" style="width: 85%;"></div>
                            </div>
                        </div>
                        <div class="skill-item">
                            <span>Python</span>
                            <div class="progress-bar">
                                <div class="progress" style="width: 65%;"></div>
                            </div>
                        </div>
                        <div class="skill-item">
                            <span>Java</span>
                            <div class="progress-bar">
                                <div class="progress" style="width: 70%;"></div>
                            </div>
                        </div>
                        <div class="skill-item">
                            <span>Security</span>
                            <div class="progress-bar">
                                <div class="progress" style="width: 25%;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section id="projects" class="full-height">
            <div class="content">
                <h2>Projects</h2>
                <div class="projects-grid">
                    <div class="project">
                        <img src="./images/program_1.png" alt="Project 1">
                        <h3>Miniprogram Accounting</h3>
                        <p>A WeChat mini-app for accounting.</p>
                        <a href="https://gitee.com/liu-lei55/miniprogram-accounting.git" target="_blank" class="project-link">Learn More</a>
                    </div>
                    <div class="project">
                        <img src="./images/program_2.png" alt="Project 2">
                        <h3>Document Manage System</h3>
                        <p>A document management system.</p>
                        <a href="https://gitee.com/liu-lei55/document-manage-system.git" target="_blank" class="project-link">Learn More</a>
                    </div>
                    <div class="project">
                        <img src="./images/program_3.png" alt="Project 3">
                        <h3>Celebrating 20th Web Design</h3>
                        <p>A webpage about the 20th National Congress.</p>
                        <a href="https://gitee.com/liu-lei55/celebrating20th.git" target="_blank" class="project-link">Learn More</a>
                    </div>

                </div>
            </div>
        </section>
        <section id="contact" class="full-height">
            <div class="content">
                <h2>Contact Me</h2>
                <div class="contact-grid">
                    <div class="contact-form">
                        <form>
                            <input type="text" placeholder="Name" required>
                            <input type="email" placeholder="Email" required>
                            <textarea placeholder="Message" required></textarea>
                            <button type="submit">Send</button>
                        </form>
                    </div>
                    <div class="contact-info">
                        <p>Feel free to reach out to me for any inquiries or collaborations. I'm always excited to work on new projects and explore innovative ideas in web design and cybersecurity.</p>
                        <div class="social-icons">
                            <div class="social-icon">
                                <i class="fab fa-twitter"></i>
                                <span class="social-tooltip">@JongAh</span>
                            </div>
                            <div class="social-icon">
                                <i class="fab fa-instagram"></i>
                                <span class="social-tooltip">@su_zizhan55 / JongAh</span>
                            </div>
                            <div class="social-icon">
                                <i class="fab fa-weixin"></i>
                                <span class="social-tooltip">
                                    <!-- <img src="https://via.placeholder.com/150" alt="WeChat QR Code"> -->
                                     WeChat: ljsxgz_55
                                </span>
                            </div>
                            <div class="social-icon">
                                <i class="fab fa-qq"></i>
                                <span class="social-tooltip">QQ: 1372459349</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 JongAh. All rights reserved.</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>